<template>
    <p>getCurrentInstance</p>
 </template>

<script lang="ts">
import { defineComponent, getCurrentInstance, onMounted } from 'vue';

export default defineComponent({
  name: 'GetInstanceView',
  data() {
    return {
      x: 1
    }
  },
  setup() {
    console.log('this1', this) // undefined

    const instance = getCurrentInstance() as any
    console.log('instance', instance) // Object
    
    onMounted(() => {
      console.log('this in onMounted', this) // undefined
      console.log('x', instance.data.x) // 1
    })
  },
  mounted() {
    console.log('this2', this) // Proxy(Object)
    console.log('x', this.x) // 1
  }
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>